<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta name="renderer" content="ie-stand">
        <meta name="referrer" content="no-referrer">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no viewport-fit=cover">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <!-- <script src="https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js"></script> -->
        <title></title>
        <style>
            #loading-model {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 100000;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background-color: rgba(2555, 255, 255, 0.8);
            }
            #loading-model .loading-text {
                font-size: 16px;
                margin-top: 30px;
                color: #409EFF;
            }
            .pswp__preloader__icn {
                opacity:0.75;
                width: 50px;
                height: 50px;
                -webkit-animation: clockwise 500ms linear infinite;
                animation: clockwise 500ms linear infinite;
            }
            
            /* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
            .pswp__preloader__cut {
                position: relative;
                width: 12px;
                height: 50px;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }
            
            .pswp__preloader__donut {
                box-sizing: border-box;
                width: 50px;
                height: 50px;
                border: 3px solid #409EFF;
                border-radius: 50%;
                border-left-color: transparent;
                border-bottom-color: transparent;
                position: absolute;
                top: 0;
                left: 0;
                background: none;
                margin:0;
                -webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
                animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
            }
            
            @-webkit-keyframes clockwise {
                0% { -webkit-transform: rotate(0deg) }
                100% { -webkit-transform: rotate(360deg) }
            }
            @keyframes clockwise {
                0% { transform: rotate(0deg) }
                100% { transform: rotate(360deg) }
            }
            @-webkit-keyframes donut-rotate {
                0% { -webkit-transform: rotate(0) }
                50% { -webkit-transform: rotate(-140deg) }
                100% { -webkit-transform: rotate(0) }
            }
            @keyframes donut-rotate {
                0% { transform: rotate(0) }
                50% { transform: rotate(-140deg) }
                100% { transform: rotate(0) }
            }
        </style>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but webcore0.1 doesn't work properly without JavaScript enabled. Please enable it to
                continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
        <div id="loading-model">
            <div class="pswp__preloader__icn">
                <div class="pswp__preloader__cut">
                <div class="pswp__preloader__donut"></div>
                </div>
            </div>
            <div class="loading-text">首页数据加载中，请稍后...</div>
        </div>
    </body>
</html>
